<template>
  <div style="display: flex; height: 100%">
    <div style="width: 60%">
      <div id="cardDiv">
        <el-card
          style="margin-bottom: 5px"
          shadow="never"
          v-for="(item, index) in rows"
          :key="index"
        >
          <!-- 头部 -->
          <div slot="header" class="headerDiv">
            <!-- 有头像展示没有显示默认头像 -->
            <div
              style="display: flex; flex-direction: row; align-items: center"
            >
              <el-avatar size="large" v-if="baseInfo.avatar" :src="compAva" />
              <el-avatar
                size="large"
                v-else
                :src="require('@/assets/xd/new/smallHeader.png')"
              />
              <div style="margin: 0px 20px; font-size: 17px; font-weight: 800">
                {{ baseInfo.userName }}
              </div>
            </div>
            <div>
              {{ item.reportime ? item.reportime : "" }}
              <el-button type="primary" size="small" @click="handleDelete(item)"
                >删除</el-button
              >
            </div>
          </div>
          <!-- 内容 -->
          <div>
            <el-text>{{ item.reportContent }}</el-text>
          </div>
          <!-- 图片 -->
          <div style="display: flex; flex-wrap: wrap">
            <div
              style="margin: 5px"
              v-for="(image, index) in imageHanderFn(item.reportImages)"
              :key="index"
            >
              <el-image
                style="width: 150px; height: 150px"
                :src="fileUrl + image"
                fit="fit"
              ></el-image>
            </div>
          </div>
          <!-- 视频 -->
          <div v-if="item.reportVideo" style="display: flex">
            <div style="margin: 5px">
              <video
                style="width: 150px; height: 150px"
                controls
                :src="compVideo(item)"
              ></video>
            </div>
          </div>
          <!-- 关注按钮之类的其他东西 -->
          <div
            style="
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
            "
          >
            <div>
              <el-button size="small" icon="el-icon-thumb">点赞</el-button>
              <el-button size="small" icon="el-icon-paperclip">分享</el-button>
              <el-button size="small" icon="el-icon-star-off">收藏</el-button>
            </div>
            <div>
              <div v-if="item.address" style="color: #7a7777">
                发布位置：{{ item.address }}
              </div>
              <div v-if="item.reportEquip" style="color: #7a7777">
                设备型号:{{ item.reportEquip }}
              </div>
              <div style="color: #7a7777">
                转发数：{{ item.blogForwardNum }} 评论数：{{
                  item.blogCommentNum
                }}
              </div>
            </div>
          </div>
        </el-card>

        <!--        分页·-->

        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentPageChange"
          :current-page="currentPage"
          :page-size="pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="totalDataCount"
          class="pagination"
        >
        </el-pagination>
      </div>
    </div>
    <div style="flex: 1; margin-left: 15px">
      <pieChart></pieChart>
      <trendChart :userId="userId"></trendChart>
    </div>
  </div>
</template>

<script>
import pieChart from "./echarts/pieChart.vue";
import trendChart from "./echarts/trendChart.vue";
import {
  detailsUser2,
  detailsRelationship,
} from "@/api/combatUser/importantUser";
import { getMinioUrl } from "@/api/combat/userWb";
import { deleteWeoBo } from "@/api/combatUser/importantUser";

export default {
  props: {
    baseInfo: {
      type: Object,
      default: () => {},
    },
  },

  data() {
    return {
      id: "",
      userId: "",
      rows: [],
      tableData: [],
      currentPage: 1,
      pageSize: 10,
      totalDataCount: 0,
      fileUrl: "",
    };
  },

  watch: {},
  components: {
    pieChart,
    trendChart,
  },
  computed: {
    compAva() {
      return `http://192.168.0.121:9000/combat/${this.baseInfo.userNickname}.jpg`;
    },

    locationFn() {
      const locations = [
        "北京市朝阳区",
        "上海市浦东新区",
        "广州市天河区",
        "深圳市南山区",
        "杭州市西湖区",
        "成都市武侯区",
        "武汉市江汉区",
        "南京市鼓楼区",
        "重庆市渝中区",
        "西安市雁塔区",
      ];
      return locations[Math.floor(Math.random() * locations.length)];
    },
  },
  mounted() {
    this.id = this.$route.query.id;
    this.userId = this.$route.query.userId;
    getMinioUrl().then((res) => {
      this.fileUrl = res.data;
    });
    this.searchData();
  },
  methods: {
    handleDelete(item) {
      //删除数据调用接口
      console.log(item);
      deleteWeoBo({
        userId: item.userId,
        targetUserIds: [item.id],
      }).then((res) => {
        if (res.code == 200) {
          this.$message.success("删除成功");
          this.searchData();
        } else {
          this.$message.error("删除失败");
        }
      });
    },
    compVideo(item) {
      // item 中的reportVideo有值
      if (item.reportVideo) {
        //item.reportime"2025-06-25" 转成 20250625
        const reportTime = item.reportime.replace(/-/g, "");
        let retUrl = reportTime + " _" + item.id + ".mp4";
        console.log("retUrl", retUrl);
        return this.fileUrl + "/combat/" + retUrl;
      } else {
        return item.reportVideo;
      }
    },
    imageHanderFn(imageList) {
      if (imageList) {
        return imageList.split(",");
      } else {
        return [];
      }
    },
    searchData() {
      //根据id查询数据
      let params = {
        userId: this.userId,
        pageSize: this.pageSize,
        pageNum: this.currentPage,
      };
      detailsUser2(params).then((res) => {
        this.rows = res.rows;
        this.totalDataCount = res.total;
        //将totalDataCount的值传递给父组件
        this.$emit("totalCount", this.totalDataCount);
      });
    },
    handleSizeChange(newSize) {
      this.pageSize = newSize;
      this.searchData();
    },
    handleCurrentPageChange(newPage) {
      this.currentPage = newPage;
      this.searchData();
    },
  },
};
</script>

<style scoped>
.headerDiv {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  padding: 0 10px;
  align-items: center;
}

.el-card__header {
  padding: 9px 20px !important;
}

#cardDiv {
  width: 100%;
  padding: 10px;
  height: 600px;
  background-color: rgba(232, 231, 231, 0.57);
  overflow-x: scroll;
}
</style>
